<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { FormValidateMethod } from '@/composables/useArcoForm'
import type { FormState } from './composables/useUpdatePassword'

const { t } = useI18n<[typeof import('./locales/zh-CN.json')]>({ useScope: 'parent' })
const formState = defineModel<FormState>({ required: true })

const formRef = ref<FormInstance | null>(null)
defineExpose<FormValidateMethod>({
  validate: (cb) => formRef.value?.validate(cb) ?? Promise.resolve()
})

const formRules: Record<string, FieldRule | FieldRule[]> = {
  oldPassword: [{ required: true, message: t('updatePassword.oldPassword.required') }],
  newPassword: [
    { required: true, message: t('updatePassword.newPassword.required') },
    { minLength: 8, message: t('updatePassword.newPassword.minLength', { length: 8 }) },
    { maxLength: 64, message: t('updatePassword.newPassword.maxLength', { length: 64 }) },
    {
      match: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
      message: t('updatePassword.newPassword.pattern')
    }
  ],
  confirmPassword: [
    { required: true, message: t('updatePassword.confirmPassword.required') },
    {
      validator(value, callback) {
        formState.value.newPassword !== formState.value.confirmPassword &&
          callback(t('updatePassword.confirmPassword.notMatch'))
      }
    }
  ]
}

const formItemProps = {
  hideAsterisk: true,
  labelColStyle: { marginBottom: 0 }
}
</script>

<template>
  <a-form ref="formRef" size="small" layout="vertical" :rules="formRules" :model="formState">
    <a-form-item
      v-bind="formItemProps"
      field="oldPassword"
      :label="t('updatePassword.oldPassword.label')"
    >
      <a-input-password
        autocomplete="false"
        data-e2e="input-old-password"
        v-model="formState.oldPassword"
        :placeholder="t('updatePassword.oldPassword.placeholder')"
      >
        <template #prefix><i i-uil-lock-alt /></template>
      </a-input-password>
    </a-form-item>

    <a-form-item
      v-bind="formItemProps"
      field="newPassword"
      :label="t('updatePassword.newPassword.label')"
    >
      <a-input-password
        autocomplete="false"
        data-e2e="input-new-password"
        v-model="formState.newPassword"
        :placeholder="t('updatePassword.newPassword.placeholder')"
      >
        <template #prefix><i i-uil-lock-alt /></template>
      </a-input-password>
    </a-form-item>

    <a-form-item
      v-bind="formItemProps"
      field="confirmPassword"
      :label="t('updatePassword.confirmPassword.label')"
    >
      <a-input-password
        autocomplete="false"
        data-e2e="input-new-password"
        v-model="formState.confirmPassword"
        :placeholder="t('updatePassword.confirmPassword.placeholder')"
      >
        <template #prefix><i i-uil-lock-alt /></template>
      </a-input-password>
    </a-form-item>
  </a-form>
</template>
